<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="l" uri="/lion-taglib" %>
<%@taglib prefix="p" uri="/lion-platform" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<script type="text/javascript">
	window.UEDITOR_HOME_URL = '${webcontext }/res/ueditor/';
	BASE_ADMIN_URL = '${webcontext}/${pathvar.admin}/';
	</script>
	<script type="text/javascript" src="${webcontext }/res/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="${webcontext }/res/ueditor/ueditor.all.js"></script>
	<link rel="stylesheet" href="${webcontext}/res/style/S.css" />
	<style type="text/css">
		#toggle_article_info:hover{color:#888;}
		#article_info_panel{width: 500px;z-index:1; height: 100%;position: absolute;background: #fff;border-top: solid 1px #ccc;box-shadow: 2px 0px 2px #ccc;}
		.sidetxt{position: absolute;right:5px;top:35px;color:#888;cursor: pointer;width: 20px;display: none;line-height: 20px;padding:150px 0px;}
		#contentArea .edui-default .edui-editor-toolbarboxouter{background: #fff;}
	</style>
	<script type="text/javascript" src="${webcontext}/res/js/jquery.min.js"></script>
	<script type="text/javascript" src="${webcontext}/res/js/S.js"></script>
	<script type="text/javascript" src="${webcontext }/res/js/mc/S.MC.UE.js"></script>
	<script type="text/javascript">
		$(function(){
			
			var catelogSelect = new S.TreeSelect({
				el:'#article_catelog',
				ds:'${webcontext }/${pathvar.admin}/blog/catelog/list',
				render:function(data){
					return '<i class="icons book_spelling"></i>'+data.name;
				},
				loaded:function(select){
					select.select(['${article.catelog}']);
				},
				change:function(data){
					if(data){
						$('#article_catelog_id').val(data.id);
					}else{
						$('#article_catelog_id').val('');
					}
				}
			});
			
			$('#toggle_article_info').click(function(){
				var $this = $(this);
				if($this.is('.fa-angle-double-down')){
					//收回去
					hideArticleInfo();
				}else{
					//展开
					showArticleInfo();
				}
			});
			
			$('.sidetxt').click(function(){
				//展开
				showArticleInfo();
			});
			
			function showArticleInfo(){
				$('#toggle_article_info').removeClass('fa-angle-double-left').addClass('fa-angle-double-down');
				var $this = $('#article_info_panel');
				$this.animate({
					left:'0px'
				},300,function(){
					$('.sidetxt').hide();
				});
			}

			/* $(window).click(function(e){
				var event = window.event;
				setTimeout(function(){
					if(!$('#article_info_panel').get(0).contains(event.srcElement)){
						hideArticleInfo();
					}
				}, 0);
			}); */

			function hideArticleInfo(){
				$('#toggle_article_info').removeClass('fa-angle-double-down').addClass('fa-angle-double-left');
				$('#article_info_panel').animate({
					left:'-460px'
				},300,function(){
					$('.sidetxt').show();
				});
			}
			
			 var ue = UE.getEditor('contentArea', {
					 toolbars:	[[  'source', '|', 'undo', 'redo', '|',
					               'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor',  'selectall', 'cleardoc', '|',
					               'rowspacingtop', 'rowspacingbottom', 'lineheight', '|','searchreplace','preview'],[
					               'customstyle', 'paragraph', 'fontfamily', 'fontsize','insertcode','indent', '|',
					               'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
					               'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
					               'emotion', 'music', 'map',  'pagebreak', 'template', 'spechars', '|',
					               'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']],
						enableAutoSave:false,
						wordCount:false,
						autoHeightEnabled:false,
						autoSyncData:true,
						elementPathEnabled:false,
						initialFrameHeight:$('#contentArea').height()-100
				 }); 
			 	
			 	
			 	//发表
			 	$('#btn_article_save').click(function(){
			 		
			 		uploadarticle(false);
			 	});
			 	
			 	var form = new S.Form('#frm_article_001');
			 	
			 	function uploadarticle(draft){
			 		
					var param = form.param();
					param.content = ue.getContent();
					param.draft = draft;
			 		$('#article_draft').val(draft || '');
			 		if(!form.validate()){
			 			new S.Info({text:'博客文章信息填写不完整',type:'warn'}).show();
			 			setTimeout(showArticleInfo,50);
				 		return;
				 	}
			 		
			 		var url = '${webcontext }/${pathvar.admin}/blog/article/save';
			 		if(param.id>0){
			 			url = '${webcontext }/${pathvar.admin}/blog/article/update';
			 		}
			 		S.request({
			 			url:url,
			 			data:param,
			 			success:function(json){
			 				new S.Info({text:'操作成功',type:'success'}).show();
			 				if(json){
			 					$('#article_id').val(json.id);
			 				}
			 			}
			 		});
			 	}
			 	
			 	//草稿
			 	$('#btn_article_draft').click(function(){
					uploadarticle(true);			 		
			 	});
			 	
			 	//新建
			 	$('#btn_article_new').click(function(){
					window.location.href='${webcontext }/${pathvar.admin}/blog/article/edit';	 		
			 	});
			 	
			 	//预览
			 	$('#btn_article_preview').click(function(){
			 		var id = $('#article_id').val();
			 		if(id == ''){new S.Info({text:'请先保存文章',type:'warn'}).show();return;}
			 		window.open('${webcontext }/${pathvar.admin}/blog/article/preview?id='+id);
			 	});
			 	
			 	//选择来源
			 	$('#btn_choose_source').click(function(){
			 		var dlg = new S.Dialog({
			 			title:'选择来源',
			 			width:500,
			 			height:630,
			 			url:'${webcontext}/${pathvar.admin}/blog/source/chooser',
			 			buttons:{
			 				'确认':function(){
			 					var items = sourceTable.getCheckedRow();
			 					if(items.length !=1){new S.Info({text:'请选择来源',type:'warn'}).show();return;}
			 					$('#article_source').val(items[0].name);
			 					this.remove();
			 				},
			 				'关闭':function(){
			 					this.remove();
			 				}
			 			}
			 		});
			 		dlg.show();
			 	});
			 	$('#btn_choose_tag').click(function(){
			 		var dlg = new S.Dialog({
			 			title:'选择标签',
			 			width:500,
			 			height:630,
			 			url:'${webcontext}/${pathvar.admin}/blog/tag/chooser',
			 			buttons:{
			 				'确认':function(){
			 					
			 					var items = tagTable.getCheckedRow();
			 					if(items.length ==0){new S.Info({text:'请选择标签',type:'warn'}).show();return;}
			 					
			 					var names = [];
			 					S.each(items,function(i,item){
			 						names.push(item.name);
			 					});
			 					$('#article_tags').val(names.join(','));
			 					this.remove();
			 				},
			 				'关闭':function(){
			 					this.remove();
			 				}
			 			}
			 		});
			 		dlg.show();
			 	});
			 	
			 	//add catelog
			 	$('#btn_add_catelog').click(function(){
			 		var dlg = new S.Dialog({
						title:'增加分类',
						width:400,
						height:200,
						url:'${webcontext }/${pathvar.admin}/blog/catelog/edit',
						buttons:{
							'保存':function(){
								if(!this.form.validate()){new S.Info({text:'填写不完整',type:'warn'}).show();return;}
								S.request({
									url:'${webcontext }/${pathvar.admin}/blog/catelog/save',
									data:this.form.param(),
									success:function(){
										new S.Info({text:'操作成功',type:'success'}).show();
										catelogSelect.reload();
										dlg.remove();
									}
								});
							},
							'关闭':function(){
								this.remove();
							}
						}
					});
					dlg.show();
			 	});
			 	
			 	
			 	//
			 	$('#btn_choose_logo').click(function(){
			 		
			 		var dlg = new S.Dialog({
			 			title:'选择图片',
			 			width:700,
			 			height:550,
			 			url:'${webcontext }/${pathvar.admin}/mc/file/choosefile?type=image&multi=false',
			 			modal:true,
			 			buttons:{
			 				'确认':function(){
			 					var items = fileChooserTbl.getCheckedRow();
					 			if(items.length !=1){new S.Info({text:'请选择1个文件',type:'warn'}).show();return;}
					 			$('#article_logo').val(items[0].url);
								this.remove();			 					
			 				},
			 				'关闭':function(){
			 					this.remove();
			 				}
			 			}
			 		});
			 		dlg.show();
			 	});
			 	
			 	$('#btn_article_tempalt_choose').click(function(){
			 		
			 		var dlg = new S.Dialog({
						title:'选择模板',
						width:700,
						height:600,
						modal:true,
						url:'${webcontext }/${pathvar.admin}/blog/theme/choose',
						buttons:{
							'确定':function(){
								var items = fileChooserTbl.getCheckedRow();
								if(items.length !=1){new S.Info({text:'请选择1个文件',type:'warn'}).show();return;}
								$('#article_tempalte').val(items[0].path);
								this.remove();
							},
							'关闭':function(){
								this.remove();
							}
						}
						
			 		});
			 		dlg.show();
			 	});
			});
	</script>
</head>
<body>
	<div class="filled-box">
		<div class="toolbar">
			<span class="btn" id="btn_article_new"><i class="icons page_add"></i> 新建</span>
			<span class="btn" id="btn_article_save"><i class="icons page_white_width"></i> 发表</span>
			<span class="btn" id="btn_article_draft"><i class="icons inbox_document"></i> 保存草稿</span>
			<span class="btn" id="btn_article_preview"><i class="icons monitor_wallpaper"></i> 预览</span>
		</div>
		<div class="filled-box" style="top:32px;">
				<div id="article_info_panel" class="content">
					<form id="frm_article_001">
						<input type="hidden" name="id" id="article_id" value="${article.id }" />
						<input type="hidden" id="article_catelog_id" name="catelog" value="${article.catelog }"  check="required" />
						<input type="hidden" name="draft" id="" value="${article.draft}"/>
						<table class="noborder">
							<tr>
								<td width="50">标题</td>
								<td><input type="text" class="long" autofocus="autofocus" check="required" name="title" value="${article.title }" /> <span style="color:red;">*</span></td>
							</tr>
							<tr>
								<td width="50">分类</td>
								<td><input type="text" class="long" id="article_catelog" /> <span style="color:red;">*</span> <span class="btn" id="btn_add_catelog"><i class="icons book_add"></i> 增加</span></td>
							</tr>
							<tr>
								<td>地址别名</td>
								<td><input type="text" class="long" name="alias" value="${article.alias }" /><i class="icons lightbulb" tips="地址栏中的别名 如：this-is-a-great-article"></i></td>
							</tr>
							<tr>
								<td>作者</td>
								<td><input type="text" name="author" value="${article.author }"/></td>
							</tr>
							<tr>
								<td>来源</td>
								<td><input type="text" value="${article.source }"  name="source" id="article_source" /><span class="btn" id="btn_choose_source"><i class="icons link_go"></i> 选择</span></td>
							</tr>
							<tr>
								<td>来源链接</td>
								<td><input type="text" class="long"  name="sourceLink" value="${article.sourceLink }" /></td>
							</tr>
							<tr>
								<td>发表日期</td>
								<td><input type="text" name="publishTime" value="${l:date('yyyy-MM-dd HH:mm:ss',article.publishTime)}" datetype="yyyy-MM-dd HH:mm:ss" /></td>
							</tr>
							<tr>
								<td>文章标签</td>
								<td><input type="text" class="long" id="article_tags" name="tags" value="${article.tags }" /><span class="btn" id="btn_choose_tag"><i class="icons three_tags"></i> 选择</span></td>
							</tr>
							<tr>
								<td>可否评论</td>
								<td><input type="checkbox" name="commentEnable" value="1" ${article.commentEnable==false?'':'checked="checked"'} /> 允许</td>
							</tr>
							<tr>
								<td>摘要</td>
								<td><textarea name="summary"  cols="30" rows="10">${article.summary}</textarea></td>
							</tr>
							<tr>
								<td width="50">引导图</td>
								<td><input type="text" name="logo"  value="${article.logo }" class="long" id="article_logo"/><span class="btn" id="btn_choose_logo"><i class="icons images"></i> 选择</span></td>
							</tr>
							<tr>
								<td width="50">独立模板</td>
								<td><input type="text" name="template" value="${article.template }" id="article_tempalte"/><span class="btn" id="btn_article_tempalt_choose"><i class="icons notes_styles"></i> 选择</span></td>
							</tr>
							<tr>
								<td align="left" colspan="2" style="text-align: left;text-indent: 0;">
									<fieldset style="padding:5px 0px;">
										<table>
											<p:props var="prop" category="article">
											<tr>
												<td width="45">${prop.name }</td>
												<td><p:propField prop="${prop }" default="${article[prop.code] }"/></td>
											</tr>
										</p:props>
									</table>
									</fieldset>
								</td>
							</tr>
							</table>
						</form>
					<div style="position: absolute;right:10px;top:10px;color:#ccc;cursor: pointer;"><i id="toggle_article_info" class="fa fa-angle-double-down fa-2x"></i></div>
					<div class="sidetxt">文 章 属 性</div>
				</div>
				<table width="100%" height="100%" >
				<tr>
					<td style="background-color: #fefefe;height: 100%;text-align: center;vertical-align: top;">
						<div style="width:950px;height:100%; background:#fff;margin:0 auto;text-align: left; ">
							<textarea name="content" style="width:100%;height: 100%;" id="contentArea">${article.content }</textarea>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>